<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="Web前端视频教程,大数据视频教程,HTML5视频教程,UI视频教程,PHP视频教程,java视频教程,python基础教程">
    <meta name="description" content="智游教育在线课程视频,为您提供java,python,HTML5,UI,PHP,大数据等学科经典视频教程在线浏览学习,精细化知识点解析,深入浅出,想学不会都难,智游教育,学习成就梦想！">
    <meta name="author" content="尚忠祥">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/jquery.Jcrop.min.css">
    <link rel="stylesheet" href="css/profile.css">
    <link rel="icon" href="favicon.png" type="image/png">
    <title>在线公开课-智游教育|java|大数据|HTML5|python|UI|PHP视频教程</title>

</head>

<body class="w100">
    <header>
        <div class="container top_bar clearfix">
            <img src="img/logo.png" alt="智游">
            <div id="tele">
                <span>4006-371-555</span>
                <span>0371-88888598</span>
            </div>
        </div>
        <menu>
            <div class="container clearfix">
                <ul class="clearfix f_left">
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./course.html">课程</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li class="menu_active"><a href="showMyProfile.action">个人中心</a></li>
                </ul>
                <div id="search_group">
                    <input type="text" placeholder="搜索课程">
                    <span id="search"></span>
                </div>
                <div id="user_bar">
                    <a href="./myProfile.html">
                    <c:if test="${empty user.imgurl}">
                                 <img  src="img/avatar_lg.png">
                            </c:if>
                            
                            <c:if test="${not empty user.imgurl}">
                                  <img  src="${user.imgurl}">
                       </c:if>
                    </a>
                    <a href="javascript:;" id="lay_out">退出</a>
                </div>
            </div>
        </menu>
    </header>
    <main>
        <div class="container">
            <h2>我的资料</h2>
            <div id="profile_tab">
                <ul class="profile_tab_header f_left clearfix">
                    <li><a href="changeProfile.action">更改资料</a></li>
                    <li class="profile_tab_line">|</li>
                    <li class="profile_tab_active"><a href="changeAvatar.action">更改头像</a></li>
                    <li class="profile_tab_line">|</li>
                    <li><a href="passwordSafe.action">密码安全</a></li>
                </ul>
                <div class="proflle_tab_body">
                    <h3><a href="showMyProfile.action">返回个人中心</a></h3>
                    <div class="proflle_tab_workplace clearfix">
                        <div class="profile_avatar_area">
                             <c:if test="${empty user.imgurl}">
                                 <img  src="img/avatar_lg.png">
                            </c:if>
                            
                            <c:if test="${not empty user.imgurl}">
                                  <img width="180px" height="180px" src="${user.imgurl}">
                            </c:if>
                            <p style="text-align: center;">当前头像</p>
                        </div>
                        <div class="profile_ifo_area">
                            <form id="upload_form" enctype="multipart/form-data" method="post" action="upLoadImg.action" ><!-- 上传图片 -->
                                <!-- hidden crop params -->
                                <input type="hidden" id="x1" name="x1" />
                                <input type="hidden" id="y1" name="y1" />
                                <input type="hidden" id="x2" name="x2" />
                                <input type="hidden" id="y2" name="y2" />

                                <p>第一步：请选择图像文件</p>
                                <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div>

                                <div class="error"></div>

                                <div class="step2">
                                    <p>第二步：请选择需要截图的部位,然后按上传</p>
                                    <img id="preview" style="width:100%;">
                                    <br>
                                    <div class="hidden">
                                        <label>文件大小</label> <input type="text" id="filesize" name="filesize" />
                                        <label>类型</label> <input type="text" id="filetype" name="filetype" />
                                        <label>图像尺寸</label> <input type="text" id="filedim" name="filedim" />
                                        <label>宽度</label> <input type="text" id="w" name="w" />
                                        <label>高度</label> <input type="text" id="h" name="h" />
                                    </div>

                                    <input type="submit" value="上传" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="container">
            <ul>
                <li><img src="img/footer_logo.png" alt="" id="foot_logo"></li>
                <li>版权所有：智游3G教育&#x3000;&#x3000;&#x3000;&copy;&nbsp;www.zhiyou100.com</li>
                <li><img src="img/微信公众号.png" alt="" id="wxgzh"></li>
            </ul>
        </div>
    </footer>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/Jcrop_upload.js"></script>

</html>